<template>
  <div class="establishId">
    <div class="max">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label=" ">
          <a-input style="width:400px" v-model="form.name" placeholder="用户名/已验证手机" />
        </a-form-model-item>
        <a-form-model-item label=" ">
          <a-input style="width:300px;margin-right:8px" v-model="form.name" placeholder="验证码" />
          <img src="" alt="点击刷新" width="92" height="40">
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <div class="clicks" @click="skip">下一步</div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import '@/assets/css/form.less'
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 11 },
      form: {
        name: '',
        type: true
      },
      rules: {

      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onChange(e) { //是否勾选
      this.form.type = e.target.checked
    },
    // 验证手机号
    checkPhoneNum(value) {
      let myreg = /^1[3|4|5|6|7|8|9][0-9]{1}[0-9]{8}$/;
      return myreg.test(value);
    },
    skip() { //下一步跳转
      // if (!this.checkPhoneNum(this.userPhone)) {
      //   this.$message.error('请输入正确的手机号');
      //   return;
      // }
      // if (!this.verification) {
      //   this.$message.error('请先填写验证码');
      //   return;
      // }
      this.$router.push('/login/view/retrievePasswordTwo'); //企业认证-供货商
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
}
</script>
<style lang="less" scoped>
.establishId {
  width: 100%;
  margin: 0 auto;
  .max {
    margin-top: 40px;
    .ant-form-item {
      padding-left: 240px;
      position: relative;
      margin-bottom: 22px;
      label {
        font-size: 12px;
        color: @colorGreyFont;
      }
      .hint {
        color: #ff9900;
        font-size: 12px;
        position: absolute;
        top: 14px;
      }
      .checkeds {
        margin-left: 200px;
      }
      .clicks {
        width: 400px;
        height: 40px;
        opacity: 1;
        background: @activeRed;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        margin-left: 44px;
        margin: 0 0 30px 39px;
        cursor: pointer;
      }
    }
  }
}
.ant-input {
  height: 41px;
}
.ant-form-item-control {
  position: relative;
}
.max img {
  width: 92px;
  cursor: pointer;
  border: 1px solid @greyBorder;
  position: absolute;
}
</style>